<template>
<div class="detail">
        <div class="detail-poto"><img :src="img" /></div>
        <div class="js">
            <div>影片简介</div>
            <p>导　　演：{{detaillist.director}}</p>
            <div class="yc">主　　演：<span v-for="item in detaillist.actors">{{item.name}}|</span></div>
            <p>地区语言：{{detaillist.nation}}({{detaillist.language}})</p>
            <p>类　　型：{{detaillist.category}}</p>
            <p>上映日期：{{detaillist.premiereAt}}</p>
            <div>{{detaillist.synopsis}}</div>
        </div>
        <a href="#" class="gp">立即购票</a>
</div>
</template>
<script>
import $ from 'jquery';
export default {
    data:function() {
        return{
            detaillist:[],
            img:''
        }
    },
    mounted:function(){
        var url = 'http://localhost:3000/'+ this.$route.params.id +'?time=' + new Date().getTime();
            var that = this;
        $.get(url).then(function(res){
            that.detaillist = res.data.film;
            that.img = res.data.film.cover.origin;
        })
    }
  
}
</script>
<style>
.detail,#app,body{
	width: 100%;
	height: 100%;
    margin-top:50px;
    background: #E9E9E9;
    font-size: 12px;
    position: relative;
}

.detail-poto img{
    width: 100%;
    height: 100%;
   
}
.now-name-top{
	color: #333333;
}
p,.yc{

    overflow: hidden;
    margin-bottom: 10px;
    padding-left: 20px;
}
.gp{
	position: fixed;
	top: 90%;
	left: 25%;
	width: 156px;
	height: 36px;
	border: 1px;
	border-radius: 18px;
	text-align: center;
	line-height: 36px;
	background: orange;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 14px;
}
</style>

